<template>
  <div class="HomeSwiper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "HomeSwiper",
  props: {
    swiperList: {
      type: Array
    }
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        },
        /* 是否循环 */
        loop: true,
        autoplay: {
          /* 触碰后自动切换是否停止 */
          disableOnInteraction: false
        }
      },
      //   swiperList: [
      //       {id:'001',imgUrl:"http://img1.qunarzz.com/piao/fusion/1811/b4/ac00a771d74f5a02.jpg_750x200_a71cff60.jpg"},
      //       {id:'002',imgUrl:"http://img1.qunarzz.com/piao/fusion/1710/15/898d6d74e9b06202.jpg_750x200_89b4509e.jpg"},
      //       {id:'003',imgUrl:"http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg"}
      //   ]
    //   swiperList: []
    };
  }
};
</script>
<style scoped>
.swiper-img {
  width: 100%;
  height: 300px;
}

.wrapper >>> .swiper-pagination-bullet-active {
  background: #fff !important;
}
</style>